<div class="col-xs-12">
    <div class="col-sm-9 select_word" style="border: 1px solid #ccc ;height: 200px;border-right: 0;border-bottom: 0;overflow: hidden">
        <volist name="words" id="word">
            <span class="pull-left"  style="color: #fff;background: {$word.color};padding:5px 10px;margin: 5px 4px 5px 5px;;cursor: pointer;margin-top:12px ">{$word.title}</span>
        </volist>
    </div>
    <div class="col-sm-3" style="border: 1px solid #ccc ;height: 200px;border-bottom: 0;padding-top: 30px;">
        <div style="font-size: 20px;color: #f36119;width: 100%;text-align: center">发布三字点评</div>
        <input type="text" id="three_word_comment" style="width: 96px;padding: 5px 10px;margin: 5px;" maxlength="3">
<style>
    #three_word_comment:focus{
        padding: 6px 12px!important;
        border: 1px solid;
        border-color: #f36119;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px #f36119;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px #f36119;
    }
</style>
        <div style="color: #ccc">只能写三个汉字</div>
        <div style="width: 20px;margin: 10px auto;">
            <input class='simple_color_callback' value='#f36119'/>
        </div>
    </div>
    <div class="col-sm-12 comment_content"
         style="border: 1px solid #ccc;height: 50px;line-height: 50px;text-align: left ">

    </div>


    <input type="hidden" id="tw_title">
    <input type="hidden" id="tw_color">

    <button class="btn btn-primary pull-right tw_doComment button_change" style="margin-top:10px "
            data-url="{:tox_addons_url('ThreeWords/ThreeWords/doComment',array('model'=>$model,'row_id'=>$row_id))}">点评
    </button>
</div>


<div class="comment_list col-xs-12">
    <div style="margin: 0 auto;width: 90%;font-size: 16px;">
        <empty name="comment">暂无评论</empty>
        <volist name="comment" id="comment">
            <div class="one_comment col-xs-12" style="margin: 0 auto">
                <div class="col-md-7 col-xs-12">
                    <img class="pull-left" src="{$comment.user.avatar64}">

                    <div class="pull-left" style="margin-left: 10px;">
                        <div class="text-left" style="font-size: 20px;height: 30px;">
                            <a class="author change" style="color: #f36119;" href="{$comment.user.space_url}" ucard="{$comment.user.uid}">{$comment.user.nickname}</a>
                        </div>
                        <div style="font-size: 14px;color: #a0a0a0">{$comment.user.address|default='未设置地区'}&nbsp; {$comment.user.doing|default='未设置职业'}</div>
                    </div>
                </div>
                <div class="col-md-2 col-xs-6 text-center" style="height: 56px;line-height: 56px">
                    <span style="color: #fff;background: {$comment.word.color};padding:5px 10px;">{$comment.word.title}</span>
                </div>
                <div class="pull-right col-md-3 col-xs-6" style="height: 56px;line-height: 56px;font-size: 14px;color: #a0a0a0;">
                    {$comment.create_time|friendlyDate}
                    <a class="del_three_words_comment" data-id="{$comment.id}"  data-url="{:tox_addons_url('ThreeWords/ThreeWords/delComment')}" >删除</a>
                </div>
                <div class="dashed pull-left" style="margin: 10px 0;width: 100%"></div>
            </div>

        </volist>
        <div class="pagination">
            {$pageHtml}
        </div>

    </div>
<input type="hidden" id="PageUrl" value="{:tox_addons_url('ThreeWords/ThreeWords/comment',array('model'=>$model,'row_id'=>$row_id,'page'=>1))}">
</div>


<script src="{:getRootUrl()}Addons/ThreeWords/_static/js/jquery.simple-color.js"></script>
<script>
    function changeThreeWordsPage(p) {
        var url = $('#PageUrl').val();
        url = url.replace(/page\/.*?\//,'page/'+p+'/');
        $('.comment_list >div').load(url,function(){ bindThreeWordsDel();})
    }
    $(function () {



        $('.simple_color_callback').simpleColor({
            boxWidth:20,
            cellWidth: 20,
            cellHeight: 20,
            chooserCSS:{ 'z-index': 500 },
            displayCSS: { 'border': 0 },
            onSelect: function(hex, element) {
                $('.comment_content span').css('background','#'+hex);
                $('#tw_color').val('#'+hex);
            }
        });
        $('#tw_title').val('');
        $('#tw_color').val('#f36119');
        bindThreeWordsDel();
        bindInput()
        bindSelectWord()
        $('.tw_doComment').click(function () {
            var obj = $(this);
            var url = obj.attr('data-url');
            var title = $('#tw_title').val();
            var color = $('#tw_color').val();
            $.post(url, {title: title, color: color}, function (res) {
                if (res.status) {
                    toast.success(res.info);
                    changeThreeWordsPage(1);
                    setTimeout(function(){
                        $('#tw_title').val('');
                        $('#tw_color').val('#f36119');
                        $('#three_word_comment').val('');
                        $('.comment_content').html('')
                    },1000)

                }
                else {
                    toast.error(res.info);
                }

            }, 'json')
        })
    })

    function bindThreeWordsDel(){
        $('.del_three_words_comment').unbind('click');
        $('.del_three_words_comment').click(function(){
            var obj = $(this);
            var url = obj.attr('data-url');
            var id = obj.attr('data-id');
            $.post(url,{id:id},function(res){
                if (res.status) {
                    toast.success(res.info);
                    obj.parents('.one_comment').slideUp();
                }else{
                    toast.error(res.info);
                }

            },'json')

        })
    }
    function bindInput() {
        $('#three_word_comment').keypress(function (e) {
            if (e.which == 13 || e.which == 10) {
                $('#three_word_comment').blur()
            }

        })
        $('#three_word_comment').blur(function (e) {
            var obj = $(this);
            str = obj.val().replace(/\s+/g, "");
            if (str.length >= 3) {
                var str = str.substr(0, 3);
                $(this).val(str);
                $('.comment_content').html('<span style="color: #fff;background: '+$('#tw_color').val()+';padding:5px 10px;">' + str + '</span>');
                $('#tw_title').val(str);
                $('#tw_color').val( $('#tw_color').val());
            }
            else {
                $('.comment_content').html('')
            }
        })
    }

    function bindSelectWord() {
        $('.select_word span').unbind('click');
        $('.select_word span').click(function () {
            var obj = $(this);
            var str = obj.text().substr(0, 3);
            var color = this.style.background;
            $('.comment_content').html('<span style="color: #fff;background: ' + color + ';padding:5px 10px;">' + str + '</span>');
            $('#tw_title').val(str);
            $('#tw_color').val(color);
            $('.simple_color_callback').setColor(color);
        })
    }

</script>